<template>
  <div class="back-div">
    <div class="back">
      <a
        v-if="!noBack"
        v-on:click="back"
        class="back-btn"
      >
        <img src="../../assets/img/back1.png" />
      </a>
      <router-link
        v-if="hasHome"
        tag="div"
        :to="{path:'/'}"
        class="home"
      >
        <img src="../../assets/img/home-white.png" />
      </router-link>
      <span
        class="title"
        :class="{alignLeft : !left}"
      >{{this.backTitle}}</span>
      <span
        v-if="rightBtn"
        @click="rightBtn.cl"
        class="rightBtn"
      >{{rightBtn.text}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "back",
  props: ["backTitle", "rightBtn", "backFn", "hasHome", "noBack", "left"],
  components: {},
  data() {
    return {
      title: "",
      isHome: false
    };
  },
  methods: {
    back() {
      if (this.backFn) {
        this.backFn();
      } else {
        this.$router.back();
      }
    }
  },
  created(){
    let {ticket} = this.$route.query
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.back-div {
  height: 110px;
  color: white;
  font-size: 36px;
  top: 0;
  left: 0;
  font-weight: bold;
  position: fixed;
  z-index: 100;
  background: #3271f1;
  width: 100%;
}

.back {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.back span {
  font-size: 36px;
  font-weight: normal;
}

a.back-btn {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

a.back-btn img {
  width: 22px;
}

.rightBtn {
  text-align: center;
  font-size: 32px;
}

.title {
  display: inline-block;
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alignLeft {
  /* text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center; */
}

.home {
  display: inline-block;
  /* position: absolute;
    left: 9rem; */
  float: left;
  margin-right: 1rem;
}

.home img {
  width: 4.8rem;
  position: relative;
  top: 0.3rem;
}
</style>
